.ar-canvas {
  position: absolute;
  top: 0;
  // left: 0;
}

.ar-bottom {
  box-sizing: border-box;
}
.ar-mask {
  background-color: rgba(0, 0, 0, 0.7);
}
.ar-mask-in {
  width: 344px;
  height: 472px;
  background: url('../../assets/ar/frame.png') no-repeat center center;
  background-size: 100%;
  font-family: AaMeitoumeinao;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  color: #fff;
}

.ar-button {
  width: 70px;
  height: 70px;
  background: url('../../assets/ar/button.png') no-repeat center center;
  background-size: cover;
}

.ar-button-in {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #462fcf -87.18%, #a831d0 202.56%);
  &:active {
    width: 40px;
    height: 40px;
  }
}

// .ar-button {
//   width: 300px;
//   height: 200px;
//   margin: 25px 0;

//   padding: 4px;
//   background: linear-gradient(to right, #8f41e9, #578aef);
//   border-radius: 16px;

//   .ar-button-in {
//     height: 100%;
//     background: #222;
//     border-radius: 13px; /*trciky part*/
//   }
// }
